<template>
	<view class="content">
		<div class="tools">
		<!-- 	<div @click="changeMap">切换底图</div>
			<div @click="calcDistance">测距</div>
			<div @click="calcArea">测面</div>
			<div @click="showMarkerInCanvas">canvas-layer层绘制marker</div>
			<div @click="showFlowLine">显示流向线条</div>
			<div @click="showGeoJson">展示GeoJson(高亮GeoJson数据区域的地图)</div>
			<div @click="downLoadFile">下载并存储网络文件</div>

			<div @click="getPixedPosition">获取当前地理位置 与地图容器的像素坐标</div> -->

			<div class="control-track">

				<button @click="trackControl('init')">初始化轨迹</button>
				<button @click="trackControl('addSpeed')">加速</button>
				<button @click="trackControl('play')">播放轨迹</button>
					<button @click="trackControl('reStart')">重置轨迹</button>
				<button @click="trackControl('pause')">暂停轨迹</button>
				<button @click="trackControl('destroy')">销毁轨迹</button>
		<button @click="trackControl('addTrack')">新增轨迹</button>
			
			</div>
			<div style="margin: 10px ;">
				当前进度 {{trackProgress.toFixed(2)}}
				<slider :value="trackProgress" :step="trackProgressStep" @change="onTrackProgressChange" />
			</div>
		</div>
		<!-- 地图对象 -->
		<view id="map" class="map"> </view>
		<!-- uniapp service层沟通renderjs 媒介 -->
		<view v-show="false" :prop="options" :change:prop="leaflet.onServiceOptionsUpdate"></view>
	</view>
</template>

<!-- service层 -->
<script>
	export default {
		data() {
			return {
				options: {
					mapStatus: '',
					position: [],
					extra: {}
				},
				trackProgress: 0,
				trackProgressStep: 1
			}
		},
		onLoad() {
			console.log(21321)
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);

					this.options.position = [res.latitude, res.longitude]
				},
				fail: (e) => {
					console.log('err', e)
				}
			});
		},
		methods: {
			showFlowLine() {
				this.options = {
					mapStatus: 'show-flow'
				}
			},
			calcDistance() {
				this.options = Object.assign(this.options, {
					mapStatus: 'edit-distance'
				})
			},
			calcArea() {

				this.options = Object.assign(this.options, {
					mapStatus: 'edit-area'
				})
			},
			showMarkerInCanvas() {

				this.options = Object.assign(this.options, {
					mapStatus: 'show-marker'
				})
			},
			changeMap() {

				this.options = Object.assign(this.options, {
					mapStatus: 'change-map'
				})
			},
			showGeoJson() {

				this.options = Object.assign(this.options, {
					mapStatus: 'show-geojson'
				})

			},
			getPixedPosition() {
				this.options = Object.assign(this.options, {
					mapStatus: 'getPixedPosition'
				})
			},

			downLoadFile() {
				// this.downLoadFileByPlus()
				this.downLoadFileByUni()
			},
			downLoadFileByUni() {
				const downloadTask = uni.downloadFile({
					url: 'https://linkeda-resource2.oss-cn-shenzhen.aliyuncs.com/smart-water/file/resource/2025-04-23/a8bc63418cdf4ef599696a5d05bfaaf6.pdf', //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功', res);
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: ({
									savedFilePath
								}) => {
									// plus.runtime.openFile(savedFilePath);
									uni.openDocument({
										filePath: savedFilePath,
										fileType: 'pdf'
									})
								}
							})
						}
					}
				})
			},
			async downLoadFileByPlus() {
				await plus.android.requestPermissions([
					"android.permission.WRITE_EXTERNAL_STORAGE",
					"android.permission.READ_EXTERNAL_STORAGE",
					"android.permission.INTERNET",
					"android.permission.ACCESS_WIFI_STATE",
				]);
				let dtask = plus.downloader.createDownload(
					'https://linkeda-resource2.oss-cn-shenzhen.aliyuncs.com/smart-water/file/resource/2025-04-23/a8bc63418cdf4ef599696a5d05bfaaf6.pdf', {
						//在手机存储更目录创建一个叫 (A管网GIS采集) 的文件夹，把文件存储进去，并更改会原名
						filename: "file://storage/emulated/0/A管网GIS采集/操作指南.pdf"
					},
					(d, status) => {
						console.log(d);
						console.log(status);
						if (status == 200) {

							// this.resultshow = true;
							plus.runtime.openFile(d.filename);
						} else {
							//下载失败
							plus.downloader.clear(); //清除下载任务
						}
					}
				);
				dtask.start();
			},
			
			setSliderProgress(progress){
				this.trackProgress=progress
			},
			setSliderProgressStep(step){
				this.trackProgressStep=step
			},
			onTrackProgressChange(e){
				this.trackControl('play',{
					progress:e.detail.value
				})
				this.$nextTick(()=>{
					this.trackControl('pause')
				})
			},
			trackControl(action, extra) {
		
			
				switch (action) {
					case 'init':
						this.options = {
							mapStatus: 'track-player',
							extra: {
								action: 'init'
							}
						}
						break;
					case 'addSpeed':
						this.options={
							mapStatus: 'track-player',
							extra: {
								action: 'speed',
								speed:3000
							}
						}
						break;
					case 'play':

						this.options = {
							mapStatus: 'track-player',
							extra: {
								action: 'play',
								progress:extra?.progress
							}
						}
						break;
						case 'reStart':
						
							this.options = {
								mapStatus: 'track-player',
								extra: {
									action: 'reStart'
								}
							}
							break;
					
					case 'pause':
						this.options = {
							mapStatus: 'track-player',

							extra: {
								action: 'pause',
							}
						}
						break;
					case 'destroy':
						this.options = {
							mapStatus: 'track-player',
							extra: {
								action: 'destroy'
							}
						}
						break;
					case 'addTrack':
					this.options = {
						mapStatus: 'track-player',
						extra: {
							action: 'addTrack'
						}
					}
					break;
				}
			}







		}
	}
</script>

<!-- leaflet地图操作区 -->
<!--  render层 -->
<script module="leaflet" lang="renderjs" setup>
	import "leaflet/dist/leaflet.css"
	import L from "leaflet"
	import Provider from '@/pages/utils/chinatmsproviders.js'
	import InternetMapCorrection from '@/pages/utils/leaflet.mapCorrection.js'

	import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
	import "leaflet-contextmenu/dist/leaflet.contextmenu.js";
	import 'leaflet-polylinedecorator';
	import 'leaflet-measure-path/leaflet-measure-path.css'
	import 'leaflet-measure-path/leaflet-measure-path.js'
	import {
		CanvasMarkerLayer
	} from "leaflet.canvasmarker.csl"
	import {
		lineString
	} from '@turf/helpers';
	import {
		booleanIntersects
	} from '@turf/boolean-intersects';
	import {
		bboxPolygon
	} from '@turf/bbox-polygon';
	import 'leaflet.markercluster';
	import 'leaflet.markercluster/dist/MarkerCluster.css';
	import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
	import hunanJson from './hunan.json'
	import TrackPlayer from '../utils/Leaflet-TrackPlayer.js'
	import TimePointData,{extraPointData} from "./TimePointData";
import { nextTick } from "vue";

	function chunkArray(array, chunkSize = 10) {
		const result = [];
		for (let i = 0; i < array.length; i += chunkSize) {
			result.push(array.slice(i, i + chunkSize));
		}
		return result;
	}

	export default {

		data() {
			return {
				map: null,
				layerGroup: null,
				canvasLayer: null,
				cluster: null,
				mapStatus: '', //当前地图状态 分为如下几种状态'edit-'
				baseMap: '',


				calcDistanceData: {
					markers: [], //测距所定位的点
					line: null
				},
				calcAreaData: {
					markers: [], //测面所定位的点
					polygon: null
				}
			}
		},
		mounted() {
			Provider(L); // 挂载插件
			this.initMap()

			this.createTrackPlayer()
		},
		methods: {
			//监听service层Options更新 newValue service层更新后的Options, oldValue 为更新前的Options
			onServiceOptionsUpdate(newValue, oldValue, ownerVm, vm) {
				console.log('vm', this)
				this.mapStatus = newValue.mapStatus
				let {
					extra
				} = newValue
				switch (newValue.mapStatus) {
					case 'show-flow':
						this.showFlowLine()
						break;
					case 'show-marker':
						this.showMarker()
						break;
					case 'edit-distance':
						this.calcDistance()
						break;
					case 'edit-area':
						break;
					case 'change-map':
						this.changeBaseMap()
						break;
					case 'show-geojson':
						console.log(newValue.position)

						this.map.setView(newValue.position, 6)
						L.marker(newValue.position, {
							icon: L.icon({
								iconUrl: require('../../static/position.png'),
								iconSize: [8, 13],
							})
						}).addTo((this.map))
						this.showGeoJsonLayer(hunanJson, this.map)


						break;
					case 'getPixedPosition':
						console.log('当前位置与容器的像素坐标:', this.map.latLngToContainerPoint(newValue.position));
						break;

					case 'track-player':
									
						this.trackPlayControl(extra.action,extra)
						break;


				}
			},

			initMap() {
				this.map = L.map('map', {
					crs: L.CRS.EPSG3857, // 地图投影坐标系
					center: [30.67, 104.07], //地图中心经纬度
					zoom: 17, //当前缩放等级
					minZoom: 5, //最小缩放等级
					maxZoom: 18, //最大缩放等级
					dragging: true, //是否允许拖拽
					attributionControl: false, //是否去除右下角标志
					zoomControl: false, //是否显示地图缩放图例


					//右键展示菜单选项(APP无法触发右键所以无效)
					contextmenu: true,
					contextmenuWidth: 140,
					contextmenuItems: [{
						text: 'Show coordinates',
						callback: () => {

						}
					}, {
						text: 'Center map here',
						callback: () => {

						}
					}, '-', {
						text: 'Zoom in',
						icon: 'images/zoom-in.png',
						callback: () => {

						}
					}, {
						text: 'Zoom out',
						icon: 'images/zoom-out.png',
						callback: () => {

						}
					}]
				});


				// 添加 默认底图-天地图影像图，
				this.baseMapLayer = L.tileLayer(
					'https://t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=6d4deb37bf726665d610b256b2d196c5', {
						subdomains: ['1', '2', '3', '4', '5', '6', '7'],
						zIndex: 2
					}).addTo(this.map)


				//添加中国地图图层->在天地图层上显示建筑的名称标注
				L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
					key: "485cd3a62955d7a962a5c0d64d4949f2",
					zIndex: 3,
				}).addTo(this.map)

				this.map.whenReady(() => {
					try {
						this.canvasLayer = L.canvasMarkerLayer({
							animation: false,
							throttleRedraw: 50,
							acheEnabled: true,
							zIndex: 9
						}).addTo(this.map);
						this.layerGroup = L.layerGroup().addTo(this.map);
						// this.$ownerInstance.callMethod('pointAndlineListApi', '');
					} catch (e) {
						console.error("CanvasMarkerLayer 初始化失败:", e);
						// 降级方案：使用普通 LayerGroup
						this.layerGroup = L.layerGroup().addTo(this.map);
					}
				});

			},
			// 切换底图
			changeBaseMap() {
				if (this.baseMapLayer) {
					this.map.removeLayer(this.baseMapLayer) //若存在底图则 先移除底图
				}
				//添加 底图-矢量地图
				this.baseMapLayer = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
					key: "485cd3a62955d7a962a5c0d64d4949f2",
					zIndex: 2,
				}).addTo(this.map)
			},
			//通过canvasLayer展示海量数据点
			showMarker() {

				// 创建图层
				//  this.canvasLayer = L.canvasMarkerLayer({
				//   collisionFlg: true
				// }).addTo(this.map);

				var icon = L.icon({
					iconUrl: require('../../static/warning.png'),
					iconSize: [20, 18],
					iconAnchor: [10, 9]
				});
				// 定义Marker
				var markers = [];
				for (var i = 0; i < 1000; i++) {
					var marker = L.marker([30.67 + Math.random() * 1.8, 104.07 + Math.random() * 3.6], {
						icon: icon,
						zIndex: 2
					}).bindPopup("I Am " + i);
					markers.push(marker);
				}



				// 把marker添加到图层
				this.canvasLayer.addLayers(markers);
				console.log('xxxxxxxxxxxxxxxxxxx')
				//定义事件
				this.canvasLayer.addOnClickListener(function(e, data) {
					console.log(data)
				});
				this.canvasLayer.addOnHoverListener(function(e, data) {
					console.log(data[0].data._leaflet_id)
				});


			},
			//展示线条流向
			showFlowLine() {
				this.drawFlyPathByTxt([{
					latlng: [30.67, 104.07]
				}, {
					latlng: [30.70, 104.07]
				}, {
					latlng: [30.70, 104.10]
				}, ], this.layerGroup);
				this.map.panTo(L.latLng(30.67, 104.07));

			},
			async drawFlyPathByTxt(array, layer) {
				if (array.length == 0) return
				// 划线，把线添加到图层组
				const line = L.polyline(array.map(d => d.latlng), {
					color: "#fff",
					weight: 2
				}).addTo(layer);

				// 这里使用 L.Symbol.marker 创建marker 这个方法在插件中
				const marker = L.Symbol.marker({
					rotate: true, //是否旋转，false marker 始终方向一致，true marker 会随着线的方向发生改变
					markerOptions: {
						icon: L.icon({
							iconUrl: require('../../static/plane.png'),
							iconAnchor: [8, 8],
							iconSize: [16, 16],
						})
					}
				})
				// 把line和marker 组合
				let polylineDecorator = L.polylineDecorator(line, {
					patterns: [{
						offset: 1, //第一个图标偏移
						endOffset: 1, //最后一个图标偏移
						repeat: '100', //图标间距
						symbol: marker
					}]
				}).addTo(layer)

				// layer.addLayer(polylineDecorator)
			},
			//测距
			calcDistance() {

				this.calcDistanceData.markers = []
				this.calcDistanceData.line = null
				this.map.off('mousedown') //先移除地图的点击事件
				this.map.on('mousedown', ({
					latlng,
					originalEvent
				}) => {
					console.log(originalEvent.button)
					let marker = L.marker([latlng.lat, latlng.lng], {
						icon: L.icon({
							iconUrl: require('../../static/position.png'),
							iconSize: [8, 13],
						}),

						//右键展示菜单选项(APP无法触发右键所以无效)
						contextmenu: true,
						contextmenuItems: [{
							text: 'Marker item',
							index: 0
						}, {
							separator: true,
							index: 1
						}],
						zIndex: 9
					}).addTo(this.map);
					this.calcDistanceData.markers.push(marker)

					if (this.calcDistanceData.markers.length == 2) {
						this.calcDistanceData.line = L.polyline(this.calcDistanceData.markers.map(marker => marker
							.getLatLng()), {
							showMeasurements: true,
							color: 'green',
							measurementOptions: {
								showTotalDistance: false,
								formatDistance: function valFormat(val) {
									// 测量值保留一位小数
									return '测量值:' + val.toFixed(1)
								}
							}
						}).addTo(this.map);
					}
					if (this.calcDistanceData.line) {
						this.calcDistanceData.line.setLatLngs(this.calcDistanceData.markers.map(marker => marker
							.getLatLng()))
					}
				})


			},
			showGeoJsonLayer(data, map) {
				L.geoJSON(data, {
					style: feature => ({
						fillColor: feature?.properties.parent.adcode == '430100' ? '#800026' : '#FEB24C',
						weight: 2,
						opacity: 1,
						color: 'white',
						fillOpacity: 0.7,
					}),
					onEachFeature: (feature, layer) => {
						// 弹出窗口
						layer.bindPopup(`
				        <div class="p-2" role="dialog" aria-labelledby="${feature.properties.name}-title">
				          <h3 id="${feature.properties.name}-title" class="text-lg font-bold">${feature.properties.name}</h3>
				        </div>
				      `, {
							maxWidth: 200
						});

						// 交互事件
						layer.on({
							mouseover: () => {
								layer.setStyle({
									fillOpacity: 0.9
								});
								map.getContainer().setAttribute('aria-live', 'polite');
							},
							mouseout: () => {
								layer.setStyle({
									fillOpacity: 0.7
								});
							},
							click: () => {
								layer.openPopup();
							},
							keydown: (e) => {
								if (e.originalEvent.key === 'Enter') {
									layer.openPopup();
									map.getContainer().setAttribute('aria-live', 'polite');
								}
							},
						});

						// 可访问性
						layer.getElement()?.setAttribute('tabindex', '0');
						layer.getElement()?.setAttribute('aria-describedby',
							`${feature.properties.name}-desc`);
						layer.getElement()?.setAttribute('aria-label',
							`省份: ${feature.properties.name}, 人口密度: ${feature.properties.density}`);
					},
				}).addTo(map);

			},

			trackPlayControl(action, argument) {

				if (!this.trackPlayer) return
				let {progress,speed} = argument
				switch (action) {
					case 'init':
					let {progressStep}= this.trackPlayer.init(this.map,TimePointData)
					 this.$ownerInstance.callMethod('setSliderProgressStep', progressStep)
					break;
					case 'speed':
					this.trackPlayer.setSpeed(speed||800)
					break;
					case 'play':
				
					this.trackPlayer.startTrack(progress)
					break;
					case 'reStart':
					this.trackPlayer.reStart()
					break;
					case  'pause':
					this.trackPlayer.pauseTrack();
					break;
					case 'destroy':
					this.trackPlayer.destroyTrack()
					break;
					case 'addTrack':
					this.trackPlayer.addTrackData(extraPointData)
					break;
					
				}
			},
			onTrackPlayerProgressUpdate(trackInfo) {
				let {progress} = trackInfo
	 this.$ownerInstance.callMethod('setSliderProgress', progress)
			},
			createTrackPlayer() {
				this.trackPlayer = new TrackPlayer({
					speed: 1,
				})
				this.trackPlayer.on('onProgressUpdate',this.onTrackPlayerProgressUpdate)
			}

		}
	}
</script>

<style lang="scss" scoped>
	.flex_a {
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.mapContanier {
		height: 100vh;
		position: relative
	}

	.mapNavBar {
		@extend .flex_a;
		color: #fff;
		width: 100%;
		position: fixed;
		z-index: 999;
		top: 0rpx;
		padding: 110rpx 20rpx 15rpx 20rpx;
		background: linear-gradient(to right, #0774f4, #0196fa);

		.navLeft {
			@extend .flex_a;
			padding-right: 8rpx;
			margin-top: 20rpx;

			.controlLable {
				color: #ffffff;
				font-size: 28rpx;
				padding-right: 8rpx;
			}
		}

		.searchBar {
			margin-top: 20rpx;
			margin-left: 10rpx;
			height: 70rpx;
			width: 580rpx;
			background-color: #fff;
			border-radius: 35rpx;
			@extend .flex_a;
			padding-right: 4rpx;
		}
	}

	.popup-search {
		padding-top: 180rpx;
		margin: 0 20rpx 20rpx 20rpx;
	}

	.leftContainer {
		z-index: 999;
		position: fixed;
		right: 30rpx;
		top: 320rpx;

		.rightMenu {
			transition: height 0.3s linear;
			will-change: height;
			width: 80rpx;
		}

		.primaryBlock {
			background-color: #000000;
			min-height: 60rpx;
			@extend .flex_a;
			justify-content: center;

			.transformText {
				color: #ffffff;
				font-size: 22rpx;
				padding-top: 4rpx;

			}
		}

		.transformBlock {
			background-color: rgba(0, 0, 0, 0.5);
			border-radius: 0%;
			padding: 16rpx 0 20rpx 0;
			@extend .flex_a;
			// gap: 10rpx;
			flex-direction: column;

			.transformItem {
				height: 100rpx;
				padding: 10rpx 0;
				@extend .flex_a;
				justify-content: space-between;
				flex-direction: column;

				.imageContainer {
					padding: 16rpx;
					border-radius: 10rpx;
				}

				.transformText {
					color: #ffffff;
					font-size: 20rpx;
					padding-top: 4rpx;

				}
			}
		}
	}

	.pointOption {
		z-index: 999;
		position: fixed;
		top: 20%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		box-shadow: 0rpx 4rpx 15rpx 0rpx rgba(82, 82, 82, 0.32);
		border-radius: 10rpx;

		.optionRow {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.optItem {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.optLabel {
					font-size: 24rpx;
					margin-top: 5rpx;
					color: #1fa4a3;
				}

				.opt-view {
					height: 140rpx;
					width: 90rpx;
					border: none;
				}
			}

			.label {
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}

		.pointInfo {
			@extend .flex_a;
			padding-left: 20rpx;

			.pointLabel {
				font-size: 20rpx;
				color: #333;
			}

			.pointName {
				margin-left: 10rpx;
				font-size: 20rpx;
				color: #ff2a14;
				text-indent: 0.5em;
			}
		}


		.pointInfos {
			padding-left: 20rpx;

			.pointLabel {
				font-size: 20rpx;
				color: #333;
			}

			.pointName {
				font-size: 20rpx;
				color: #ff2a14;
				//text-indent: 0.5em;
			}
		}
	}

	.active-bg {
		background-color: #b8babb;
	}


	.trueLabel {
		color: #1fa4a3;
	}

	.falseLabel {
		color: #d1d1d1;
	}

	.floating-center {
		z-index: 999;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}


	.destinationOption {
		z-index: 999;
		position: fixed;
		bottom: 120rpx;
		right: 0;
		height: 80rpx;
		// width: 520rpx;
		width: 620rpx;
		@extend .flex_a;
		justify-content: space-between;

		.destItem {
			background-color: rgba(0, 0, 0, 0.5);
			height: 80rpx;
		}

		.pointDesc {
			// width: 215rpx;
			width: 320rpx;
			padding: 0 15rpx;
			box-sizing: border-box;

			.check {
				background-color: #07ba0b;
				width: 45rpx;
				height: 45rpx;
				@extend .flex_a;
				justify-content: center;
				border-radius: 10rpx;
			}

			.context {
				padding-left: 10rpx;
				@extend .flex_a;

				.name {
					font-size: 24rpx;
					color: #ffde00;
				}
			}
		}

		.quantity {
			@extend .flex_a;
			width: 300rpx;
			box-sizing: border-box;

			.residue {
				border-left: 2rpx solid #9b9b9b;
			}

			.context {
				margin: 15rpx 0;
				flex: 1;
				@extend .flex_a;
				justify-content: center;
				height: 50rpx;
			}
		}

		.leftlabel {
			font-size: 20rpx;
			color: #fff;
		}

		.qty {
			font-size: 24rpx;
			color: #ffde00;
		}
	}

	.u-content {
		text-align: center;
		/* 垂直居中（如果需要的话） */
		height: 100rpx;
		/* 示例高度，根据需要调整 */
		padding: 24rpx;
	}

	.rightBottom {
		z-index: 999;
		position: fixed;
		bottom: 10rpx;
		right: 20rpx;
		display: flex;
		flex-direction: row;
		padding: 15rpx;
		box-sizing: border-box;

		.leftItem {
			width: 80rpx;
			height: 80rpx;
			box-shadow: 0rpx 4rpx 15rpx 0rpx rgba(82, 82, 82, 0.32);
			border-radius: 50%;
			@extend .flex_a;
			justify-content: center;
			background-color: #fff;
		}

		.coverage {
			margin-left: 20rpx;
		}
	}

	.leftBottom {
		z-index: 999;
		position: fixed;
		border-radius: 25rpx;
		bottom: 60rpx;
		left: 10rpx;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: row;
		padding: 25rpx;
		box-sizing: border-box;

		.left-scroll {
			height: 250rpx;
			width: 220rpx;
		}
	}

	.leftBottom-scale {
		z-index: 999;
		position: fixed;
		bottom: 10rpx;
		left: 10rpx;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.5);
		border: 2px solid #505050;
		border-top: none;
		font-size: 25rpx;
		display: flex;
		flex-direction: row;
		height: 40rpx;
		width: 100rpx;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
	}

	.sight-show {
		position: fixed;
		z-index: 999;
		top: 1250rpx;
		right: 30rpx;
		width: 80rpx;
		padding: 16rpx 0 16rpx 0;
		@extend .flex_a;
		justify-content: space-between;
		flex-direction: column;
		text-align: center;

		.transformText {
			color: #ffffff;
			font-size: 22rpx;
			padding-top: 4rpx;
			width: 50rpx;
		}
	}

	.sight-show-background {
		background-color: rgba(0, 0, 0, 0.5);
	}

	.sight-show-background-image {
		background-image: linear-gradient(to bottom, #0196fa, #0773f4);
	}

	.map {
		width:800px;
		height: 600px;
		margin: 0 auto;
	}

	.newbox {
		width: 595rpx;
		height: 510rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		// background-image: url('@/static/image/tabBar/versions/update.png');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		z-index: 10000; //勿删

		/* 定位父容器 */
		.desc {
			margin-top: 250rpx;
			margin-left: 50rpx;
			font-size: 28rpx;
			color: #666666;
			height: 120rpx;
			overflow: scroll;
		}


		.footer {
			display: flex;
			align-items: center;
			justify-content: space-between;

			text-align: center;
			padding: 20rpx 40rpx;
			padding-top: 40rpx;

			.bt {
				padding: 20rpx 40rpx;
			}

			.no {
				background: #E8E8E8;
				width: 30%;
				border-radius: 10rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				margin-right: 30rpx;

			}

			.gx {
				width: 50%;
				background: #007AF1;
				border-radius: 10rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}

	.tip-content {
		text-align: center;
	}

	.tip-text {
		display: block;
		font-size: 25rpx;
		line-height: 1.5;
	}

	.loading-map-box {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 10001;

		.loading-text {
			margin-top: 20rpx;
			color: #007AF1;
			font-size: 28rpx;
		}
	}

	/* 使用 ::v-deep 穿透组件作用域 */
	::v-deep .leaflet-tile {
		// transition: opacity 0.3s !important;
		// opacity: 0.9;
	}

	// .control-track {
	// 	width: 500px;
	// 	// height: 500px;
	// 	padding: 20px;
	// 	display: flex;
	// 	align-items: center;
	// }
		.control-track{
			display: flex;
		}
	.control-track button{
		width: 120px;
		height: 50px;
		// padding: 10px;
		line-height: 50px;
	}
</style>